import React, { PureComponent } from 'react';
import { Input, Form, Cascader, Select, Button, Modal, Row, Col, message, InputNumber, TreeSelect, DatePicker, Upload } from 'antd';
import { checkRepeat, addPerson } from '@/services/peoples'
import { getHandle } from '@/services/baseurl'
import { isAnte, isZhongZheng } from '../../../utils/utils';
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 12 },
}
class AddModal extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            id_number: '',
            name: '',
            password: '',
            confirmPassword: '',
            type: '2',//级别
            student_type: '',//部门
            sexy: '3',
            duty: '',//职务
            phone: '',
            lessons: [],
            loading: false,
            exam_date: '',
            company: '',
            invoice: '',
            invoice_img: [],
        }
    }
    checkRepeatHandle = () => {
        const { id_number } = this.state;
        checkRepeat({ id_number }).then(res => {
            if (res.status === 1) {
                message.error('有重复准考证号')
            } else {
                message.success('可以使用此准考证号')
            }
        })
    }
    changeValue = (e: any, name: string) => {
        this.setState({
            [name]: e
        })
    }
    changeValueWithTarget = (e: any, name: string) => {
        this.setState({
            [name]: e.target.value
        })
    }
    changeExamDate = (e: any, exam_date: string) => {
        this.setState({
            exam_date
        })
    }
    submitHandle = () => {
        const { id_number, name, password, confirmPassword, type, student_type, sexy, duty, phone, lessons, exam_date, company, invoice, invoice_img } = this.state;
        if (!id_number || !name || !password || !confirmPassword || !lessons[0] || !student_type[0]) {
            return message.error('请完善用户信息')
        }
        if (password !== confirmPassword) {
            return message.error('两次密码输入不一致')
        }
        this.setState({
            loading: true
        })
        checkRepeat({ id_number }).then(res => {
            if (res.status === 1) {
                this.setState({
                    loading: false
                })
                return message.error('有重复准考证号')
            }
            const { hideAddPerson, renderList, currentPage } = this.props;
            addPerson({ id_number, name, password, type, student_type, sexy, duty, phone, subject: lessons, exam_date, company, invoice, invoice_img:invoice_img[0]?invoice_img[0].originFileObj:'' ,
                forbidden:'1'}).then(res => {
                this.setState({
                    loading: false
                })
                if (res.status === 1) {
                    message.success('添加成功')
                    hideAddPerson()
                    renderList(currentPage)
                    const adminname = localStorage.getItem('name')
                    const operation = adminname + '新增了一名学员' + name;
                    getHandle({ operation })
                } else {
                    message.error('添加失败')
                }
            })
        })

    }
    changeFile = (info: any, name: string) => {
        let fileList = [...info.fileList];
        fileList = fileList.slice(-1);
        fileList = fileList.map(file => {
            if (file.response) {
                file.url = file.response.url;
            }
            return file;
        });
        this.setState({ [name]: fileList });
    };
    render() {
        const { addVisible, hideAddPerson, options, lessonsData, typeList, loading } = this.props;
        const authority = localStorage.getItem('antd-pro-authority').includes('109')||localStorage.getItem('antd-pro-authority').includes('909');
        const { invoice_img } = this.state;
        return (
            <Modal
                footer={
                    [
                        <Button key="0" onClick={() => hideAddPerson()}>取消</Button>,
                        <Button key="1" type="primary" loading={loading} onClick={this.submitHandle}>确定</Button>
                    ]
                }
                visible={addVisible} onCancel={() => hideAddPerson()} title={<span>添加用户<span style={{ color: "red", fontSize: 14 }}>( 注：带*号的为必填项目，准考证号不能重复新增，否则输入无效！)</span></span>}>
                <Row>
                    <Col span={24}>
                        <Form>
                            <Form.Item required {...layout} label="准考证号">
                                <Input placeholder="请输入准考证号" onChange={(e) => this.changeValueWithTarget(e, 'id_number')} />
                                <Button style={{ marginTop: 10 }} type="primary" onClick={this.checkRepeatHandle}>检查重复</Button>
                            </Form.Item>
                            <Form.Item required {...layout} label="用户姓名">
                                <Input placeholder="请输入用户姓名" onChange={(e) => this.changeValueWithTarget(e, 'name')} />
                            </Form.Item>
                            <Form.Item required {...layout} label="单位部门">
                                <Cascader placeholder="请选择单位部门" changeOnSelect options={options} onChange={(e) => this.changeValue(e, 'student_type')} />
                            </Form.Item>
                            <Form.Item required {...layout} label="登录密码">
                                <Input placeholder="请输入登录密码" onChange={(e) => this.changeValueWithTarget(e, 'password')} />
                            </Form.Item>
                            <Form.Item required {...layout} label="确认密码">
                                <Input placeholder="请确认密码" onChange={(e) => this.changeValueWithTarget(e, 'confirmPassword')} />
                            </Form.Item>
                            <Form.Item  {...layout} label="培训科目" required>
                                <TreeSelect
                                    treeData={lessonsData}
                                    onChange={(e) => this.changeValue(e, 'lessons')}
                                    allowClear
                                    multiple
                                    // treeCheckable
                                    showSearch
                                    placeholder="请选择培训科目"
                                />
                            </Form.Item>
                            <Form.Item  {...layout} label="联系电话">
                                <InputNumber placeholder="请输入联系电话" style={{ width: '100%' }} onChange={(e) => this.changeValue(e, 'phone')} />
                            </Form.Item>
                            <Form.Item  {...layout} label="性别">
                                <Select placeholder="请选择性别" onChange={(e) => this.changeValue(e, 'sexy')} defaultValue="3">
                                    <Select.Option value="3">保密</Select.Option>
                                    <Select.Option value="1">男</Select.Option>
                                    <Select.Option value="2">女</Select.Option>
                                </Select>
                            </Form.Item>
                            {
                                isAnte()||isZhongZheng()&& <Form.Item  {...layout} label="发票编号">
                                <Input placeholder="请输入发票编号" onChange={(e) => this.changeValueWithTarget(e, 'invoice')} />
                            </Form.Item>
                            }
                            {/* {
                                isAnte()&&    <Form.Item  {...layout} label="发票图片">
                                <Upload beforeUpload={() => { return false }} onChange={(e) => this.changeFile(e, 'invoice_img')} fileList={invoice_img}><Button>上传图片</Button></Upload>
                            </Form.Item>
                            } */}
                            <Form.Item  {...layout} label="级别">
                                {
                                    authority ? <Select placeholder="请选择级别" onChange={(e) => this.changeValue(e, 'type')} defaultValue="2">
                                        <Select.Option value="2" key="2">考生</Select.Option>
                                        {
                                            typeList.map(item => {
                                                return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                            })
                                        }
                                    </Select> : <Select placeholder="请选择级别" disabled defaultValue="2">
                                            <Select.Option value="2" key="2">考生</Select.Option>
                                            {
                                                typeList.map(item => {
                                                    return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                                })
                                            }
                                        </Select>
                                }
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </Modal>
        );
    }
}

export default AddModal;
